<script setup>
import {RouterView} from 'vue-router'
import Menu from "@/components/Menu.vue";
import {ref} from "vue";

const isCollapse = ref(false)
/**
 * 菜单数据需要满足以下数据结构
 * const menuClass = {
 *   title: {type: String, required: true,},
 *   path: {type: String, required: true,},
 *   children: {type: Array<menuClass>, required: false},
 * };
 */
let menuData = [
  {
    title: "test1",
    path: "test1",
    children: [
      {
        title: "test1-1",
        path: "test1-1",
        children: [
          {
            title: "test1-1-1",
            path: "test1-1-1",
            children: [
              {
                title: "test1-1-1-1",
                path: "test1-1-1-1",
                children: [],
              },
            ],
          },
          {
            title: "test1-1-2",
            path: "test1-1-2",
            children: [],
          },
        ],
      },
      {
        title: "test1-2",
        path: "test1-2",
        children: [],
      },
    ],
  },
  {
    title: "test2",
    path: "test2",
    children: [
      {
        title: "test2-1",
        path: "test2-1",
        children: [],
      },
    ],
  },
  {
    title: "test3",
    path: "test3",
    children: [],
  },
  {
    title: "test4",
    path: "test4",
    children: null,
  }
];
</script>

<template>
  <el-container style="width: 100vw;height: 100vh;">
    <el-aside style="background-color: #2c3e50;width: fit-content;">
      <el-radio-group v-model="isCollapse" style="margin: 5px">
        <el-radio-button :value="false">expand</el-radio-button>
        <el-radio-button :value="true">collapse</el-radio-button>
      </el-radio-group>
      <Menu :isCollapse="isCollapse" :is-root="true" :data-list="menuData"></Menu>
    </el-aside>
    <el-main style="padding: 1.7rem;">
      <RouterView/>
    </el-main>
  </el-container>
</template>

<style scoped>
</style>
